<template>
  <div id="login" v-if="showLoginVuew">
    <div class="login">
      <div class="router-link">
        <p>RIS-EDI接口管理平台</p>
      </div>
      <div class="logo">
        <img alt src="../../../assets/img/download.png" />
      </div>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" inline status-icon style="padding:30px 60px">
        <el-form-item prop="username">
          <el-input ref="user" auto-complete="off" type="text" v-model="ruleForm2.username">
            <template slot="prepend"><i class="el-icon-user"></i></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input @keyup.enter.native="submitForm('ruleForm2')" auto-complete="off" type="password" v-model="ruleForm2.password">
            <template slot="prepend"><i class="el-icon-lock"></i></template>
          </el-input>
        </el-form-item>
        <el-button @click="submitForm('ruleForm2')" type="primary" >{{$t('common.logIn')}}<i class="el-icon-right"></i> </el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { setToken } from "@/utils/auth";
export default {
  name: "",
  data() {
    return {
      ruleForm2: {
         username: "",
         password: "",
      },
      rules2: {
        username: [{validator: this.user, trigger: "blur"}],
        password: [{validator: this.password, trigger: "blur"}],
      },
      showLoginVuew: true,
      showRegister: false,
      uid:"",
    };
  },
  methods: {
    user(rule, value, callback) {
      if (value === "") {
        callback(new Error(this.$inputPlease("common.user")));
      } else {
        callback();
      }
    },
    password(rule, value, callback) {
      if (value === "") {
        callback(new Error(this.$inputPlease("common.pwd")));
      } else {
        callback();
      }
    },
   async submitForm(formName) {
            // const {username,password} = this.ruleForm2
            // console.log(username);
            // console.log(password);
            // let res = await this.$api.post("/login", {"username":"admin","password":"1234"});
            // setToken(res.token)
            // this.$store.commit("SET_USERINFO", res.data);
            // this.$router.push("/index");
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            const {username,password} = this.ruleForm2
            console.log(username);
            console.log(password);
            let res = await this.$api.post("/login", {username,password});
            setToken(res.token)
            this.$store.commit("SET_USERINFO", res.data);
            this.$router.push("/index");
          } catch (e) {
            // this.$message.error(e);
          }
        }
      });
    },
  },
  mounted() {
    this.$refs.user.focus();
    this.submitForm();
  },
};
</script>

<style scoped>
#login {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  padding: 20px 60px;
}

.logo img {
  width: 310px;
  display: block;
}

.login {
  height: 362px;
  border: 1px solid #b4b4b4;
}

.router-link {
  text-align: right;
  padding: 1em;
}


.btn {
  height: 36px;
}
</style>
